<template>
	<view class="leave">
		<view class="leaveBox">
			<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
			<u--form labelPosition="top" labelWidth="auto" :model="formData" :rules="rules" ref="formData">
				<u-form-item label="类型" borderBottom>
					<view @click="showSex = true" style="width: 100%;">
						<u-input v-model="formData.flowName" disabled disabledColor="#ffffff" placeholder="请选择"
							:clearable="true || false" border="none"></u-input>
					</view>
					<uni-icons class="uni-icons" v-if="formData.flowName" @click="handleClearable()" type="clear"
						color="#e1e1e1" size="14" style="text-align: right;">
					</uni-icons>
				</u-form-item>
			</u--form>
			<roc-diyform v-if="model_id" :modelId="model_id" :showFormData="showFormData" @roc-submit="submit">
			</roc-diyform>
			<u-picker :show="showSex" itemHeight="88" :columns="flowTypeList" keyName="label" closeOnClickOverlay
				@cancel="showSex = false" @close="showSex = false" @confirm="sexSelect"></u-picker>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		getModelId,
		getCompletedJson,
		getListFlow,
		addApply,
		doAdd
	} from "../../api/flow.js"
	export default {
		data() {
			return {
				showSex: false,
				formData: {
					name: '',
					sex: '',
					flowName: '',
					flowId: ''
				},
				rules: {
					'flowName': {
						type: 'string',
						required: true,
						message: '请选择流程项',
						trigger: ['blur', 'change']
					},
				},
				id: '',
				model_id: '',
				code: '',
				flowTypeList: [],
				showFormData: {},
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.getModelId();
			this.getListFlow();
		},
		created() {},
		methods: {
			handleClearable() {
				this.formData.flowName = '';
				this.formData.flowId = ''
			},
			sexSelect(e) {
				this.formData.flowName = e.value[0].label
				this.formData.flowId = e.value[0].id
				this.showSex = false
			},
			submit(formData) {
				const sendObj = {
					code: this.code,
					list: JSON.stringify(formData),
				}
				const obj = {
					flow_id: this.formData.flowId,
					model_id: this.model_id,
				}
				doAdd(sendObj).then((res) => {
					if (res.data.code === 1) {
						obj.model_data_id = res.data
						addApply(obj).then((res) => {
							if (res.data.code === 1) {
								this.$refs.uToast.show({
									title: res.data.msg,
									type: 'success ',
								})
								uni.redirectTo({
									url: '/pages/manage/myApply'
								});
							}
						})
					}
				})
			},
			//流程项
			getListFlow() {
				getListFlow({
					flow_type_id: this.id,
				}).then(res => {
					if (res.data.code === 1) {
						let arr = []
						res.data.data.list.forEach(ele => {
							let obj = {
								label: ele.name,
								id: ele.id
							}
							arr.push(obj)
						})
						this.flowTypeList.push(arr)
					}
				})
			},
			//获取模型id
			getModelId() {
				getModelId({
					flow_type_id: this.id
				}).then((res) => {
					if (res.data.data) {
						this.model_id = res.data.data.model_id
						this.code = res.data.data.model.code
					}
				})
			},
		}
	}
</script>

<style>
	.leave {
		width: 100%;
	}

	.leaveBox {
		width: 90%;
		margin: 0 auto;
	}
</style>
